<template>
  <div>
    <div class="person">
      <div class="shadow">
         <div class="headIcon">
          <img :src="photo" alt="" class="avatar">
        </div>
        <div class="name">
          <span class="nam">{{name}}</span>
        </div>
      </div>
    </div>
    <div class="Humanmoney">
      <div class="left">
        <div class="figures">{{count}}</div>
        <div class="people">社團成員</div>
      </div>
      <div class="right">
        <div class="figures">{{activityNumber}}</div>
        <div class="at-num">活動數量</div>
      </div>
    </div>
    <div class="my">
      <div class="my_assn">
        <div class="signUp">管理</div>
      </div>
    </div>
    <div class="nav">
      <div class="more_active ">
        <div class="more_active_list">
          <div class="more_active_nva" @click="toPerson">
            <div class="more_active_assn active1"></div>
            <span>成員管理</span>
          </div>
          <!--<div class="more_active_nva" onclick="location.href = 'apply_list.html?sid={{sid}}&name={{name}}'">-->
          <div class="more_active_nva" @click="toApplyList">
            <div class="more_active_assn active2"></div>
            <span>申請列表</span>
          </div>
          <div class="more_active_nva" @click="toActivityList">
            <div class="more_active_assn active3"></div>
            <span>管理活動</span>
          </div>
          <div class="more_active_nva" data-am-modal="{target: '#my-actions'}" @click="showAction1">
            <div class="more_active_assn active4"></div>
            <span>郵件群發</span>
          </div>
          <div
            class="more_active_nva"
            data-am-modal="{target: '#my-actions2'}"
            @click="showAction2"
          >
            <div class="more_active_assn active5"></div>
            <span>短信群發</span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="more_active">
        <div class="more_active_list">
          <div class="more_active_nva">
            <div class="more_active_assn active6"></div>
            <span>收入账户</span>
          </div>
          <div class="more_active_nva">
            <div class="more_active_assn active7"></div>
            <span>文件存储</span>
          </div>
          <div class="more_active_nva">
            <div class="more_active_assn active8"></div>
            <span>短信账户</span>
          </div>
        </div>
      </div>
    </div>
    <div class="my">
      <div class="my_assn">
        <div class="signUp">發佈</div>
      </div>
    </div>
    <div class="nav">
      <div class="more_active">
        <div class="more_active_list">
          <div class="more_active_nva">
            <div class="more_active_assn active9">
              <input type="file" id="cover" class="fileUp" ref="cover" @change="uploadCover">
            </div>
            <span>封面設置</span>
          </div>
          <div class="more_active_nva" @click="toSummary">
            <div class="more_active_assn active10">
            </div>
            <span>简介</span>
          </div>
          <div class="more_active_nva" @click="uploadStructure">
            <div class="more_active_assn active11">
            </div>
            <span>架构</span>
          </div>
          <div class="more_active_nva" @click="toAddActivity">
            <div class="more_active_assn active12"></div>
            <span>活动</span>
          </div>
          <div class="more_active_nva">
            <div class="more_active_assn active13"></div>
            <span>联系方式</span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="more_active">
        <div class="more_active_list">
          <div class="more_active_nva">
            <div class="more_active_assn active14"></div>
            <span>合作伙伴</span>
          </div>
          <div class="more_active_nva">
            <div class="more_active_assn active15"></div>
            <span>LOGO</span>
          </div>
          <div class="more_active_nva">
            <div class="more_active_assn active16"></div>
            <span>相册</span>
          </div>
          <div class="more_active_nva">
            <div class="more_active_assn active17"></div>
            <span>動態</span>
          </div>
        </div>
      </div>
    </div>
    <am-modal :is-show.sync="myActions" :width="320"  custom-class="modal-raduis">
      <am-modal-header custom-class="modal-head modal-bg">
        <span>請選擇您的群發對象</span>
      </am-modal-header>
      <am-modal-body custom-class="modal-body modal-bg">
        <div class="btn-content">
          <div>
            <button @click="toEmailActivity">
              <img src="../style/img/38.png" class="amx">
              活動對象
            </button>
          </div>
          <div>
            <button @click="toEmailPersonCheck">
              <img src="../style/img/39.png" class="amx">
              社團成員
            </button>
          </div>
        </div>
      </am-modal-body>
      <am-modal-footer custom-class="modal-footer">
        <div @click="close(1)">
          <span>取消</span>
        </div>
      </am-modal-footer>
    </am-modal>
    <am-modal :is-show.sync="myActions2" :width="320"  custom-class="modal-raduis">
      <am-modal-header custom-class="modal-head modal-bg">
        <span>請選擇您的群發對象</span>
      </am-modal-header>
      <am-modal-body custom-class="modal-body modal-bg">
        <div class="btn-content">
          <div>
            <button @click="toSmsActivity">
              <img src="../style/img/38.png" class="amx">
              活動對象
            </button>
          </div>
          <div>
            <button @click="toPersonCheck">
              <img src="../style/img/39.png" class="amx">
              社團成員
            </button>
          </div>
        </div>
      </am-modal-body>
      <am-modal-footer custom-class="modal-footer">
        <div @click="close(2)">
          <span>取消</span>
        </div>
      </am-modal-footer>
    </am-modal>
  </div>
</template>

<script>
import { getSocietyLogoAndInfo, isManager } from '@/api/society'
import axios from 'axios'
export default {
  name: 'ManageSociety',
  data () {
    return {
      sid: this.$route.query.sid,
      photo: '',
      activityNumber: '',
      name: '',
      count: '',
      myActions: false,
      myActions2: false,
      closeDimmer: true
    }
  },
  created () {
    this.loadList()
  },
  beforeRouteLeave (to, from, next) {
    var ele = document.querySelectorAll('.am-dimmer')
    ele.forEach(item => {
      item.style.position = 'relative'
    })
    next()
  },
  methods: {
    close (n) {
      n === 1 ? this.myActions = false : this.myActions2 = false
    },
    toSummary () {
      this.$router.push('/summary?sid=' + this.sid)
    },
    showAction1 () {
      this.myActions = true
    },
    showAction2 () {
      this.myActions2 = true
    },
    uploadCover () {
      var cover = this.$refs.cover
      this.upload(cover, 'image', 'cover', '/think.php/system/image/upload')
    },
    uploadStructure () {
      this.$router.push('/upload_structure')
    },
    upload (file, fileType, type, url) {
      const image = new FormData()
      image.append(fileType, file.files[0])
      image.append('type', type)
      axios.post(url, image, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.code === 1) {
          alert('上传成功')
          this.loadList()
          // this.loadStore()
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    loadList () {
      getSocietyLogoAndInfo({ sid: this.sid })
        .then(res => {
          this.isManager()
          this.activityNumber = res.data.activityNumber
          this.photo = 'http://weyouth.vip' + res.data.photo
          this.name = res.data.name
          this.count = res.data.userNumber
        })
        .catch(err => {
          console.log(err)
        })
    },
    isManager () {
      isManager({ sid: this.sid })
        .then(res => {
          if (res.code === 1) {
          } else {
            this.$router.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    toPerson () {
      this.$router.push(
        '/person_list?sid=' + this.sid + '&count=' + this.count
      )
    },
    toApplyList () {
      this.$router.push('/apply_list?sid=' + this.sid)
    },
    toActivityList () {
      this.$router.push('/activity_list?sid=' + this.sid)
    },
    toAddActivity () {
      this.$router.push('/add_activity?sid=' + this.sid)
    },
    toEmailActivity () {
      this.$router.push('/apply_list?sid=' + this.sid + '#email_activity')
    },
    toEmailPersonCheck () {
      this.$router.push('/person_check?sid=' + this.sid + '#email')
    },
    toPersonCheck () {
      this.$router.push('/person_check?sid=' + this.sid)
    },
    toSmsActivity () {
      this.$router.push('/activity_list?sid=' + this.sid + '#sms')
    }
  }
}
</script>
<!--
TODO: 相册icon没有
-->
<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.am-modal-actions-group {
    margin: 10px;
}
.body {
  background: white;
  font-family: PingFang SC;
}
.am-modal-dialog {
  border-radius: 10px;
}
.modal-bg {
  background: rgba(255, 201, 181, 1);
}
.modal-head {
  padding: 10px;
  font-size: 18px;
  color: rgba(119, 119, 119, 1);
  font-weight: 550;
}
.modal-footer {
  width: 100%;
  text-align: center;
  font-size: 18px;
}
.modal-footer span {
  line-height: 44px;
  color: rgba(119, 119, 119, 1);
  font-weight: 550;
}
.btn-content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 200px;
  padding-top: 20px;
}
.btn-content button {
  border-radius: 30px;
  background: rgba(255, 201, 181, 1);
  padding: 10px;
  width: 200px;
  height: 50px;
  border: 2px solid rgba(119, 119, 119, 1);
  outline: none;
  margin-top: 10px;
  color: rgba(119, 119, 119, 1);
  font-weight: bold;
  font-size: 16px;
}
.person {
  overflow: hidden;
  width: 100%;
  height: 158px;
  background-size: cover !important;
  background: url(../style/img/16.png);
}
.shadow {
  width: 100%;
  height: inherit;
  background: rgba(255, 255, 255, 10%);
}
.nam {
  color: white;
  font-family:PingFang SC;
  line-height: 20px;
  font-size: 22px;
  width: 65px;
  text-align: center;
}
.leftIcon {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  margin: 16px 0 0 15px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  float: left;
  padding-left: 10px;
}
.headIcon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 1px;
  float: left;
  background: #fff;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin-top: 26px;
  margin-left: 16px;
  background-size: cover !important;
}
.avatar {
  display: inline-block;
  /* margin: 0 auto; */
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* border: 1px solid #000; */
}
.name {
  width: 50%;
  float: left;
  margin-left: 8%;
  margin-top: 43px;
  color: rgba(22, 22, 22, 1);
}

.my {
  width: 100%;
  height: 44px;
  float: left;
}

.my_assn {
  width: 91.73%;
  height: 43px;
  margin-left: 4.27%;
}

.more_active {
  overflow: hidden;
  width: 100%;
}

.more_active_list {
  height: 90px;
}
.more_active_assn {
  display: inherit;
  width: 35px;
  height: 35px;
  margin-top: 23px;
  background-size: cover !important;
}

.more_active_nva {
  vertical-align: top;
  /* padding-top: 5px; */
  /* padding-bottom: 10px; */
  float: left;
  width: 20%;
}

.more_active_nva span {
  text-align: center;
  display: block;
  width: 65px;
  height: 16px;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: rgba(119, 119, 119, 1);
}

.signUp {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(119, 119, 119, 1);
  line-height: 44px;
}

.Humanmoney {
  float: left;
  width: 85%;
  box-shadow: rgba(255, 163, 144, 0.7) 1px 1px 10px 1px;
  background: rgb(255, 255, 255);
  margin: -57px auto auto 8%;
  border-radius: 9px;
}

.left {
  margin-top: 10px;
  line-height: 26px;
  float: left;
  text-align: center;
  width: 50%;
  margin-bottom: 20px;
}

.right {
  margin-top: 10px;
  line-height: 26px;
  margin-bottom: 20px;
  float: right;
  text-align: center;
  width: 49%;
  border-left: solid 1px rgba(248, 248, 248, 1);
}

.figures {
  margin-top: 10px;
  float: left;
  width: 100%;
  text-align: center;
  color: red;
  font-weight: bold;
}

.people {
  float: left;
  width: 100%;
  text-align: center;
}
.line {
  width: 100%;
  margin: 0 auto;
  height: 1px;
  border: 1px solid rgba(245, 245, 245, 1);
  position: relative;
  top: 5px;
}
.active1 {
  background: url(../style/img/member_manage.png);
  margin-left: 14px;
}

.active2 {
  background: url(../style/img/apply_list.png);
  margin-left: 14px;
}

.active3 {
  background: url(../style/img/at_manage.png);
  margin-left: 14px;
}

.active4 {
  background: url(../style/img/email_send.png);
  margin-left: 14px;
}

.active5 {
  background: url(../style/img/sms_send.png);
  margin-left: 14px;
}

.active6 {
  background: url(../style/img/money.png);
  margin-left: 14px;
}

.active7 {
  background: url(../style/img/wallet.png);
  margin-left: 14px;
}

.active8 {
  background: url(../style/img/sms_member.png);
  margin-left: 14px;
}

.active9 {
  background: url(../style/img/bg-img.png);
  margin-left: 14px;
}

.active10 {
  background: url(../style/img/summary.png);
  margin-left: 14px;
}

.active11 {
  background: url(../style/img/structure.png);
  margin-left: 14px;
}

.active12 {
  background: url(../style/img/activity.png);
  margin-left: 14px;
}

.active13 {
  background: url(../style/img/tel_way.png);
  margin-left: 14px;
}

.active14 {
  background: url(../style/img/partner.png);
  margin-left: 14px;
}

.active15 {
  background: url(../style/img/LOGO.png);
  margin-left: 14px;
}

.active16 {
  background: url(../style/img/xiangce.png);
  margin-left: 14px;
}
.active17 {
  background: url(../style/img/dongtai.png);
  margin-left: 14px;
}
.nav {
  float: left;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  border: none;
  width: 94%;
  margin-left: 3%;
  background: #fff;
  border-radius: 4px;
  padding: 8px;
  /* padding-bottom: 20px; */
}

.amx {
  width: 28px;
  margin-right: 4px;
}

.am-modal-actions-danger {
  color: grey !important;
  background: white !important;
}

.am-btn-secondary {
  background: white !important;
  color: black;
  border: none !important;
}
.fileUp {
  width: 100%;
  height: 100%;
  opacity: 0; /*css属性——opcity不透明度，取值0-1*/
}
</style>
